<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{html_report_name}} - TestReport</title>
  <style>
    body {
      background-color: #f2f2f2;
      color: #333;
      margin: 0 auto;
      width: 960px;
    }
    #summary, #details {
      width: 960px;
    }
    #summary th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    #summary td {
      background-color: lightblue;
      text-align: center;
      padding: 4px 8px;
    }
    #details th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    #details td {
      background-color: lightblue;
      padding: 5px 12px;
    }
    #details .detail {
      background-color: lightgrey;
      font-size: smaller;
      padding: 5px 10px;
      text-align: center;
    }
    #details .success {
      background-color: greenyellow;
    }
    #details .error {
      background-color: red;
    }
    #details .failure {
      background-color: salmon;
    }
    #details .skipped {
      background-color: gray;
    }

    .button {
      font-size: 1em;
      padding: 6px;
      width: 4em;
      text-align: center;
      background-color: #06d85f;
      border-radius: 20px/50px;
      cursor: pointer;
      transition: all 0.3s ease-out;
    }
    a.button{
      color: gray;
      text-decoration: none;
    }
    .button:hover {
      background: #2cffbd;
    }

    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: hidden;
      opacity: 0;
    }
    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
      margin: 70px auto;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      width: 50%;
      position: relative;
      transition: all 3s ease-in-out;
    }

    .popup h2 {
      margin-top: 0;
      color: #333;
      font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .popup .close:hover {
      color: #06d85f;
    }
    .popup .content {
      max-height: 80%;
      overflow: auto;
      text-align: left;
    }

    @media screen and (max-width: 700px) {
      .box {
        width: 70%;
      }
      .popup {
        width: 70%;
      }
    }

  </style>
</head>

<body>
  <h1>Test Report: {{html_report_name}}</h1>

  <h2>Summary</h2>
  <table id="summary">

    <tr>
      <th>START AT</th>
      <td colspan="4">{{time.start_at.strftime('%Y-%m-%d %H:%M:%S')}}</td>
    </tr>
    <tr>
      <th>DURATION</th>
      <td colspan="4">{{ '%0.3f'| format(time.duration|float) }} seconds</td>
    </tr>
    <tr>
      <th>PLATFORM</th>
      <td>HttpRunner {{ platform.httprunner_version }} </td>
      <td>{{ platform.python_version }} </td>
      <td colspan="2">{{ platform.platform }}</td>
    </tr>
    <tr>
      <th>TOTAL</th>
      <th>SUCCESS</th>
      <th>FAILED</th>
      <th>ERROR</th>
      <th>SKIPPED</th>
      <!-- <th>ExpectedFailure</th>
      <th>UnexpectedSuccess</th> -->
    </tr>
    <tr>
      <td>{{stat.testsRun}}</td>
      <td>{{stat.successes}}</td>
      <td>{{stat.failures}}</td>
      <td>{{stat.errors}}</td>
      <td>{{stat.skipped}}</td>
      <!-- <td>{{stat.expectedFailures}}</td>
      <td>{{stat.unexpectedSuccesses}}</td> -->
    </tr>
  </table>

  <h2>Details</h2>
  <table id="details">
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th>Response Time</th>
      <th>Detail</th>
    </tr>
    {% for record in records %}
      <tr id="record_{{loop.index}}">
        <th class="{{record.status}}" style="width:5em;">{{record.status}}</td>
        <td>{{record.name}}</td>
        <td style="text-align:center;width:6em;">{{ record.meta_data["response_time(ms)"] }} ms</td>
        <td class="detail">

          <a class="button" href="#popup_log_{{loop.index}}">log</a>
          <div id="popup_log_{{loop.index}}" class="overlay">
            <div class="popup">
              <h2>Request and Response data</h2>
              <a class="close" href="#record_{{loop.index}}">&times;</a>

              <div class="content">
                <h3>Request:</h3>
                <div style="overflow: auto">
                  <table>
                    <tr>
                      <th>url</th>
                      <td>{{ record.meta_data.url }}</td>
                    </tr>
                    <tr>
                      <th>method</th>
                      <td>{{ record.meta_data.method }}</td>
                    </tr>
                    <tr>
                      <th>headers</th>
                      <td>
                        {% for key, value in record.meta_data.request_headers.items() %}
                        <div>
                          <strong>{{ key }}</strong>: {{ value | safe }}
                        </div>
                        {% endfor %}
                      </td>
                    </tr>
                    {% if record.meta_data.method in ["POST", "PUT"] %}
                    <tr>
                      <th>body</th>
                      <td>
                          <pre>{{ record.meta_data.request_body | safe }}</pre>
                      </td>
                    </tr>
                    {% endif %}

                  </table>
                </div>

                <h3>Response:</h3>
                <div style="overflow: auto">
                  <table>
                    <tr>
                      <th>status_code</th>
                      <td>
                        {{ record.meta_data.status_code }}
                      </td>
                    </tr>
                    <tr>
                      <th>headers</th>
                      <td>
                          {% for key, value in record.meta_data.response_headers.items() %}
                          <div>
                            <strong>{{ key }}</strong>: {{ value | safe }}
                          </div>
                          {% endfor %}
                      </td>
                    </tr>
                    <tr>
                      <th>body</th>
                      <td>
                        {% if record.meta_data.response_data_type == "image" %}
                          <img src="{{ record.meta_data.response_body }}" />
                        {% else %}
                          <pre>{{ record.meta_data.response_body | safe }}</pre>
                        {% endif %}
                      </td>
                    </tr>
                  </table>
                </div>

                <h3>Statistics:</h3>
                <div style="overflow: auto">
                  <table>
                    <tr>
                        <th>content_size(bytes)</th>
                        <td>{{ record.meta_data["content_size"] }}</td>
                      </tr>
                    <tr>
                      <th>response_time(ms)</th>
                      <td>{{ record.meta_data["response_time(ms)"] }}</td>
                    </tr>
                    <tr>
                      <th>elapsed(ms)</th>
                      <td>{{ record.meta_data["elapsed(ms)"] }}</td>
                    </tr>
                  </table>
                </div>

              </div>
            </div>
          </div>

          {% if record.attachment %}
            <a class="button" href="#popup_attachment_{{loop.index}}">traceback</a>
            <div id="popup_attachment_{{loop.index}}" class="overlay">
              <div class="popup">
                <h2>Traceback Message</h2>
                <a class="close" href="#record_{{loop.index}}">&times;</a>
                <div class="content"><pre>{{ record.attachment }}</pre></div>
              </div>
            </div>
          {% endif %}

        </td>
      </tr>
    {% endfor %}
  </table>
</body>